<template>
  <div class="history">
    <el-row>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="购买渠道" name="0">
    <el-table 
    class="pr"
      :data="data.products"
      @row-click="get(url)"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="价格来源"
        width="410">
      </el-table-column>
      <el-table-column
        prop="bestType"
        label="低价房型"
        width="410">
      </el-table-column>
      <el-table-column
        prop="price"
        label="最低价格/每晚">
      </el-table-column>
    </el-table>
  </el-collapse-item>
  </el-collapse>
</el-row>
  </div>

</template>

<script>
export default {
    props:{
        data:
        {
            type:Object,
            default:()=>({})
        }
    },
    data(){
        return{
            products: [{
            name: "",
            bestType: "",
            price: ""
          }],
          url:'',
          activeNames: ['1']
        }
    },
    methods:{
        get(){
            window.location.href = "https://hotels.ctrip.com/hotels/694679.html";
        },
        handleChange(val) {
        console.log(val);
      }
    }
}
</script>

<style scoped lang="less">
.pr{
  cursor: pointer;

}
.history{
    border:1px #ddd solid;
    padding:10px;
    margin-top:10px;

    h5{
        font-size: 16px;
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom:1px #eee solid;
    }

    .history-item{
        padding:10px 0;
        font-size: 14px;
        border-bottom: 1px #eee solid;

        &:last-child{
            border:none;
        }

        .to-from{
            margin-bottom: 5px;
        }

        p{
            font-size: 12px;
            color:#666;
        }

        span{
            color:#fff;
            display: block;
            padding:2px 10px;
            background: orange;
            border-radius: 4px;
            font-size:12px;
            cursor: pointer;
        }
    }
}
</style>